<template>
	<div class="elTable">
		<el-table v-loading="listLoading" :highlight-current-row="highlight" :data="formData.data"  :max-height="tableHeight" ref="t" @current-change="handleSelectionChange" @selection-change="selectionChange">
			<slot></slot>
		</el-table>
		<pagination v-if="showPage && formData.total>0"  
			:total="formData.total" 
			:currentPage.sync="formData.currentPage" 
			:pageSize.sync="formData.pageSize"  
			@pagination="turnPage"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
			:page-sizes="pageSizeArray"
			:layout="layout"
		/>
		<sortTable ref="sortTable"></sortTable>
	</div>
</template>

<script type="text/javascript">
import Pagination from "@/components/Pagination"; //分页
import sortTable from "@/dialog/table/tableSort"; //表格排序框
export default {
	name: 'xForm.elTable',
	components: { Pagination, sortTable},
	data(){
		return {
            tableHeight: 0,
            dataInfo: [], //表格数据
            total:0, //总数量
		}
	},
	props: {
		formData:{
			type: Object, 
			default () {
				return {
					currentPage: 1,
					pageSize: 10,
					total: 1,
					data: [
						{name: '你好'}
					]
				}
			}
		}, //表单数据
		listLoading:{type: Boolean, default: false}, //是否显示loading
		enterSearch:{type: Boolean, default: false}, //是否回车搜索
		pageSizeArray: {
			type: Array,
			default () {
				return [5, 10,  20, 50, 100]
			}
		},
		layout: {
			type: String,
			default () {
				return 'total, sizes, prev, pager, next, jumper'
			}
		},
		highlight: {
			type: Boolean,
			default () {
				return false
			}
		},
		showPage:{type: Boolean, default: true}, //是否显示分页栏
	},
	mounted(){
		this.$emit("tableData", 1);
        this.$nextTick(() => {
            this.tableHeight = this.table.fullHeight();
        });
        window.onresize = () => {
            this.tableHeight = this.table.fullHeight();
        };
        //是否回车执行搜索
        if(this.enterSearch){
        	document.addEventListener("keyup", e => e.key==='Enter'?this.turnPage(1):'')	
        }
	},
	methods:{
		loadData(data, total){ //接收修改的表格数据
			this.dataInfo = data;
			this.total = total;
		},
		turnPage(){ //翻页
			this.$emit("getList")
		}, 
		handleSelectionChange(val){ //复选框选中事件
			this.$emit("selection-change", val);
		},
		sortTable(sortOpt){ //排序 {dataUrl,sortUrl,callback}
			sortOpt.formData = sortOpt.formData || this.formData;
			sortOpt.ref = this.$refs.t;
            this.$refs.sortTable.open(sortOpt);
		},
		handleCurrentChange (val) {
			this.$emit("getList")
		},
		handleSizeChange (val) {
			this.$emit("getList")
		},
		selectionChange (item) {
			this.$emit('selection-change', item)
		},
	},
	watch:{}
}
</script>
<style lang="scss" scoped>
.elTable {
	padding: 0 16px;
	background: #fff;
}
</style>
